<template>
  <el-card shadow="hover" class="card">
    <template #header>
      <div class="flex justify-between ml-2">
        <!-- <span class="text-sm">{{ item.title }}</span> -->
        <span class="text-sm">{{ title }}</span>
        <el-tag effect="plain" class="mr-1">
          {{ tip }}
        </el-tag>
      </div>
    </template>
    <!-- card body -->
    <div ref="el" id="hots" style="width: 100%;height: 300px;"></div>
    <!-- <el-table-column>
        <template #default="{ row }">
          <div class="flex items-center">
            <small>ID:{{ row.id }}</small>
          </div>
        </template>
      </el-table-column> -->
  </el-card>
</template>

<script setup>
import { dayjs } from 'element-plus'
import { onBeforeUnmount, onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import { useResizeObserver } from '@vueuse/core'
// import { getLiuLiang } from '~/api/test';
import { getLiuLiang } from '~/api/base';


const outside = defineProps({
  title: String,
  tip: String,
  // btns: Array
})
let myChart = null
onMounted(() => {
  let chartDom = document.getElementById('hots')
  if (chartDom) {
    myChart = echarts.init(chartDom)
    getData()
  }
})
onBeforeUnmount(() => {
  if (myChart) echarts.dispose(myChart)
})


function getData() {
  const recentTime = 31
  const start_data = dayjs().subtract(recentTime, 'day')

  // 生成最近x天日期数组
  function getNearXDate(_day = recentTime) {
    return Array.from({ length: _day }, (_, i) =>
      dayjs().subtract(i, 'day').format('YYYY-MM-DD')
    );
  }

  // 整个创建了一个 空的数据 格式
  let day31data = getNearXDate()
  // console.log('day7data', day30data)
  // holdData 为31天的 空的占位数据,30天的话会出现问题
  const holdData = day31data.map(item => {
    return { date: item, value: 0 }
  })
  // console.log('holdData', holdData)

  /// todo:待解决:数据出现了占位值范围之外的日期
  getLiuLiang().then(res => {
    console.log('level_left_res', res)
    let resdata = res.results
    let formatData = []

    for (let i of resdata) {
      formatData.push({ date: dayjs(i.time).format('YYYY-MM-DD'), value: 1 })
    }
    console.log('tableData', formatData)
    /// TODO:1.这里以后可以优化成一次merge,2.出现范围外的时间
    // 创建一个Map来合并(统计)重复值
    const formatMap = new Map();
    for (const item of formatData) {
      const { date, value } = item;
      // console.log('date', date)
      if (start_data.isAfter(date)) {
        break
      }
      // 如果在字典中有则 value+1
      if (formatMap.has(date)) {
        formatMap.set(date, formatMap.get(date) + value);
      } else {
        // 如果在字典中没有，则添加到字典中
        formatMap.set(date, value);
      }
    }
    let isoData = Array.from(formatMap, ([date, value]) => ({ date, value }));
    console.log('isoData', isoData)

    console.log('hello??')
    isoData = [{
      "date": "2023-08-20",
      "value": 12
    }, {
      "date": "2023-08-19",
      "value": 8
    }, {
      "date": "2023-08-18",
      "value": 4
    }, {
      "date": "2023-08-17",
      "value": 6
    }, {
      "date": "2023-08-16",
      "value": 7
    }, {
      "date": "2023-08-15",
      "value": 3
    }]

    console.log('holdData', holdData)
    // 下面开始合并 占位值和数据
    const mergedMap = new Map();
    // 合并 holdData
    for (const item of holdData) {
      const { date, value } = item;
      mergedMap.set(date, value);
    }
    // console.log('mergedMap', mergedMap)
    // 合并 isoData
    if (isoData) {
      for (const item of isoData) {
        const { date, value } = item;
        if (mergedMap.has(date)) {
          mergedMap.set(date, mergedMap.get(date) + value);
        } else {
          mergedMap.set(date, value);
        }
      }
    }
    // console.log('mergedMap', mergedMap)
    // 根据合并后的Map生成目标数组
    let ecData = Array.from(mergedMap, ([date, value]) => ({ date, value }));
    // console.log('sumdata', ecData)
    let option = {
      xAxis: { type: 'category', inverse: true, },
      yAxis: {
        type: 'value',
        axisTick: { interval: 1 },
      },
      title: {
        top: 30,
        left: 'center',

        // text: 'Daily Step Count'
      },
      dataset: {
        dimensions: ['date', 'value'],
        source: ecData ? ecData :
          [
            { value: 10, date: '1970-1-1' },
            { value: 30, date: dayjs().format('YYYY-MM-DD') },
          ],
      },
      tooltip: {
        trigger: 'item',
        formatter: 'In {b}',
        axisPointer: {
          type: 'shadow'
        },
      },
      series: {
        type: 'bar',
      }
    };
    option && myChart.setOption(option);
  })


}

// vueuse 里面的 useResizeObserve 在使用myChart.resize() 重新自己设定大小
// const el = ref(null)
// useResizeObserver(el, entries => myChart.resize())
</script>


<style scoped></style>